<template>
	<view>
		<swiper vertical="true" style="height: 100vh;"  :current="currentindex" @change="catchswiper">
			<!-- 注册屏 -->
			<swiper-item class="swiper-item">
					<view class="oneswiper">
						<view class="logtop">
							<view class="telbot">
								<view class="rollback" @tap="text1">
									邮箱注册
								</view>
								<view class="contel" @tap="goLoginTel">
									手机号注册
								</view>
							
							</view>

						</view>

						<view class="logbot">
							<view class="conttop">
								<view class="thelinel">

								</view>
								<view class="thetext">
									试用一下快捷登录
								</view>
								<view class="theliner">

								</view>
							</view>
							<loginc></loginc>
							<view class="contbot" @tap="currentindex = 1">
								<view class="botal">
									<view class="">
										已有账号,去登录
									</view>
									<view class="bottext">
										<image class="botimg" src="/static/tabBar/down_2.png" mode=""></image>
									</view>
								</view>
							</view>
						</view>
					</view>
			</swiper-item>
			<!-- 登录屏 -->
			<swiper-item >
				<scroll-view class="swiper-item">
					<view class="secondswiper">
						<view class="towpag" @tap="currentindex = 0">
							<view class="logtop">
								<view class="toptow" >
									<view class="contow">
										<image class="imgtow" src="/static/tabBar/up_2.png" mode=""></image>
									</view>
									<view class="titow">
										没有账号?创建一个~
									</view>
								</view>
							</view>
						</view>
						<view class="telinp">
							<view class="inptop">
								<view class="inptoptext">
									账号:
								</view>
								<uni-easyinput class="inpp" trim="all" v-model="userName" placeholder="手机号码,电子邮箱或用户名" ></uni-easyinput>
							</view>
							<myline></myline>
							<view class="inptop">
								<view class="inptoptext">
									密码:
								</view>
								<uni-easyinput class="inpp" type="password" v-model="userPwd" placeholder="请输入密码" ></uni-easyinput>
							</view>
							<myline></myline>
							<view class="inpbot">
								<view class="">
									无法访问您的账户?
								</view>
								<view class="">
									免密码登录
								</view>
							</view>
						</view>
						<view class="logtop">

							<view class="telbot">
								<view class="rollback" @tap="currentindex = 0">
									后退
								</view>
								<view class="contel" @tap="submit">
									下一步
								</view>

							</view>
							<view class="tipc">
								温馨提示,你可以选择免密码登录,方便登录
							</view>
						</view>
						<view class="logbot">
							<view class="conttop">
								<view class="thelinel">

								</view>
								<view class="thetext">
									试用一下快捷登录
								</view>
								<view class="theliner">

								</view>
							</view>
							<loginc></loginc>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import loginc from '@/components/login/login.vue'
	import myline from '@/components/common/Lines.vue'
	import $http from '@/common/api/request.js'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				//收集表单数据:
				userName: "",
				userPwd: "",
				currentindex:0,
				//规则校验:
				rules: {
					//校验用户名:
					userName: {
						rule: /\S/,
						msg: "账号不能为空"
					},
					//校验密码:
					userPwd: {
						rule: /^[0-9a-zA-z]{6,16}$/,
						msg: "密码应该为6-16位"
					}
				}
			};
		},
		components: {
			loginc,
			myline
		},
		methods: {
			...mapMutations(['login']),
			//校验规则:
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					uni.showToast({
						title: this.rules[key].msg,
						icon: "none"
					})
					bool = false;
					return bool;
				}
				return bool;
			},
			//提交按钮
			submit() {
				//判读是否正确:
				if (!this.validate('userName')) {
					return
				}
				if (!this.validate('userPwd')) {
					return
				}
				uni.showLoading({
					title: "登录中..."
				})
				$http.request({
					url: "/login",
					method: "POST",
					data: {
						userName: this.userName,
						userPawd: this.userPwd
					}
				}).then((res) => {
					if (res.success) {
						uni.showLoading({
							title: "登录中..."
						})
						setTimeout(() => {
							uni.hideLoading();
							this.login(res.data);
							uni.navigateTo({
								url: '/pages/my/my'
							})
						}, 1000)

					} else {
						uni.showToast({
							title: res.msg,
							mask: true,
							icon: 'none'
						})
					}

				}).catch(() => {

				})
			},
			catchswiper(event){
				
				this.currentindex = event.detail.current;
			},
			//
			text1(){
				uni.navigateTo({
					url:'/pages/login-email/login-email'
				})
			},
			// 前往手机登录页面
			goLoginTel() {
				uni.navigateTo({
					url: '/pages/login-tel/login-tel'
				})
			}

		},
		onLoad(e) {
			console.log(e);
			if(e.currentindex && e.username){
				this.currentindex = 1;
				this.userName = e.username;
				uni.showToast({
					title:"请输入密码",
					icon:"none"
				})
			}
		}
	}
</script>

<style lang="scss">
	.swiper-item{
		 background: rgba(0, 0, 0, 0.1) url('/static/img/login/117338468_p0_master1200.jpg') no-repeat;
		 background-size: 100% auto;
		 
	}
	.oneswiper{
		position: relative;
		height: 100%;
		top: 55%;
		left: 0;
		.logtop {
			.telbot {
				display: flex;
				justify-content: space-around;
				color: $uni-text-color-inverse;
				.rollback{
					padding: 25rpx;
					width: 30%;
					border: 1rpx solid #282c35;
					border-radius: 25rpx;
					font-size: $uni-font-size-lg;
					text-align: center;
					background-color: #185abd;
				}
				.contel {
					padding: 20rpx;
					width: 30%;
					border: 1rpx solid #282c35;
					border-radius: 25rpx;
					font-size: $uni-font-size-lg;
					text-align: center;
					background-color: #e33c2f;
					color: $uni-text-color-inverse;
				}
			}
		}
		
		.logbot {
			.conttop {
				margin-top: 50rpx;
				position: relative;
				height: 80rpx;
				.thelinel {
					position: absolute;
					top: 48rpx;
					left: 56rpx;
					border-bottom: 2rpx solid #21252b;
					width: 30%;
				}
		
				.theliner {
					position: absolute;
					top: 48rpx;
					right: 40rpx;
					border-bottom: 2rpx solid #21252b;
					width: 30%;
				}
		
				.thetext {
					position: absolute;
					padding: 0 10rpx;
					background-color: #21252b;
					color: #fff;
					top: 30rpx;
					left: 280rpx;
					font-size: 26rpx;
				}
			}
		
			.contbot {
				margin-top: 80rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
		
				.botal {
					font-size: 26rpx;
		
					.bottext {
						display: flex;
						justify-content: center;
		
						.botimg {
							width: 50rpx;
							height: 50rpx;
						}
					}
		
				}
		
			}
		}
	}
	
	.telinp {
		margin-top: 180rpx;
		font-size: 30rpx;
		color: $uni-text-color-inverse;
		background-color: rgba(0, 0, 0, .6);
		.inptop {
			display: flex;
			font-size: $uni-font-size-lg;
			color: #fff;
			.inptoptext{
				padding: 10rpx;
			}
			.inpp {
				width: 80%;
				padding: 10rpx;
				
			}
		}

		.inpbot {
			padding: 10rpx 20rpx;
			display: flex;
			justify-content: space-between;
			font-size: 26rpx;
			
		}
	}
	.secondswiper{
		.towpag {
			display: flex;
			justify-content: center;
			height: 200rpx;
			margin-top: 10rpx;
		
			.logtop {
		
				align-items: center;
				margin-top: 60rpx;
				.contow {
					display: flex;
					justify-content: center;
		
					.imgtow {
						width: 50rpx;
						height: 50rpx;
					}
		
				}
		
				.titow {
					font-size: 30rpx;
					color: $uni-text-color-inverse;
				}
			}
			
		}
	
		.logtop {
			.tttop {
				display: flex;
				justify-content: center;
				height: 500rpx;
		
				.contop {
					width: 100%;
					position: absolute;
		
					display: flex;
					justify-content: center;
		
					z-index: 999;
		
					.tit {
						color: #1a9c34;
						font-size: 80rpx;
		
					}
				}
		
				
			}
		
			.telbot {
				margin-top: 280rpx;
				display: flex;
				justify-content: space-around;
				color: $uni-text-color-inverse;
				.rollback{
					padding: 25rpx;
					width: 30%;
					border: 1rpx solid #282c35;
					border-radius: 25rpx;
					font-size: $uni-font-size-lg;
					text-align: center;
					background-color: #185abd;
				}
				.contel {
					padding: 20rpx;
					width: 30%;
					border: 1rpx solid #282c35;
					border-radius: 25rpx;
					font-size: $uni-font-size-lg;
					text-align: center;
					background-color: #e33c2f;
					
				}
			}
		
			.tipc {
				margin-top: 10rpx;
				text-align: center;
				font-size: $uni-font-size-lg;
				color: $uni-text-color-placeholder;
			}
		}
	
		.logbot {
			.conttop {
				margin-top: 80rpx;
				position: relative;
				height: 80rpx;
				.thelinel {
					position: absolute;
					top: 48rpx;
					left: 56rpx;
					border-bottom: 2rpx solid #21252b;
					width: 30%;
				}
		
				.theliner {
					position: absolute;
					top: 48rpx;
					right: 40rpx;
					border-bottom: 2rpx solid #21252b;
					width: 30%;
				}
		
				.thetext {
					position: absolute;
					padding: 0 10rpx;
					background-color: #21252b;
					color: #fff;
					top: 30rpx;
					left: 280rpx;
					font-size: 26rpx;
				}
			}
		
			.contbot {
				margin-top: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				width: 100%;
		
				.botal {
					font-size: 26rpx;
		
					.bottext {
						display: flex;
						justify-content: center;
		
						.botimg {
							width: 50rpx;
							height: 50rpx;
						}
					}
		
				}
		
			}
		}
	
	}


		


</style>